<template>
    <!-- 地图，后期封装 -->
    <div>
        <div id="mapDiv" :style="{ 'width': width, 'height': height }"></div>
        <div class="area-row">
            <div class="area-item" @click="showOver(false)" :class="{ 'active': (areaActive == false) }">全部</div>
            <div class="area-item" v-for="(area, index) in aresList" :class="{ 'active': (areaActive == area.area_name) }"
                @click="showOver(area)">{{ area.area_name }}</div>
        </div>
    </div>
    <!-- 地图，后期封装 -->
</template>
<script>
import mapOverL from './mapData'
import { getRandomColor } from '@/utils/public.js'
export default {
    props: {
        'width': {
            type: String,
            default: "100vw"
        },
        'height': {
            type: String,
            default: '70vh'
        },
        'showArea': {
            type: Boolean,
            default: true
        },
        //lngLat , content
        'markersList': {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            markers: [], infoWindows: [], areaActive: false, mapOverL, aresList: []
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        //显示与隐藏图层
        showOver(area) {
            if (area == false) {
                this.areaActive = '';
                this.aresList.map((item, index) => {
                    item.polygon.show();
                    item.line.show();
                })
                return;
            }
            this.aresList.map((item, index) => {
                item.polygon.hide();
                item.line.hide();
            })
            this.areaActive = area.area_name;
            area.line.show()
            area.polygon.show()
        },
        //设置中心点
        centerAndZoom(lng = 113.05, lat = 22.68, size = 11) {
            this.map.centerAndZoom(new T.LngLat(lng, lat), size);
        },
        addMarkers() {
            if (this.markersList.length == 0) { return }
            this.markersList.map((item, index) => {
                const lola = new T.LngLat(item.lngLat[0], item.lngLat[1]);
                this.markers[index] = new T.Marker(lola);
                this.infoWindows[index] = new T.InfoWindow();
                this.infoWindows[index].setContent(item.content);
                this.map.addOverLay(this.markers[index]);
                this.markers[index].addEventListener("click", () => {
                    this.markers[index].openInfoWindow(this.infoWindows[index])
                })
            });
        },
        initMap() {
            this.map = new T.Map("mapDiv");
            this.centerAndZoom();
            this.init_overlay();
            this.addMarkers();
        },
        //添加覆盖物
        init_overlay() {
            this.mapOverL.map((item, index) => {
                let PolygonList = [];
                let points = [];
                item.geometry.coordinates[0].map((lt_list, index2) => {
                    //lt 经纬度
                    lt_list.map((lt, index3) => {
                        PolygonList.push(new T.LngLat(lt[0], lt[1]))
                        points.push(new T.LngLat(lt[0], lt[1]));
                    })
                });

                let polygon = new T.Polygon(PolygonList, { 'color': getRandomColor(), weight: 0, opacity: 0.7 });
                this.map.addOverLay(polygon);
                var line = new T.Polyline(points, { 'color': 'blue', 'weight': 2 });
                this.map.addOverLay(line);
                this.aresList.push({ "area_name": item.properties.name, polygon, line });
            })
        }

    },
}  
</script>

<style scoped>
.area-row {
    background-color: #f1f1f1;
    display: flex;
    overflow: auto;
    padding-top: 0px;
    margin-top: 0px;
    align-items: center;
    padding-top: 1px;
    padding: 5px;
    scrollbar-width: none;
}

.area-item {
    display: inline-block;
    min-width: 70px;
    border: none;
    display: block;
    border-radius: 8px;
    font-size: 1.2em;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 1px;
    /* height: 90%; */
    flex: 0 0 auto;
    background-color: #efefef;
    padding: 8px 4px;
    text-align: center;
    position: relative;
}

.area-item.active {
    background-color: #d7e9fa;
}
</style>